<template>
  <el-dialog v-model="props.modelValue" width="50%" center @close="close">
    <template v-slot:title>
      <view class="vip-header" hover-class="none" hover-stop-propagation="false">
        <view class="title">您正在购买{{goodsInfo.goods_name}}</view>
      </view>
    </template>
    <view class="vip-list">
			<view class="vip-item" v-for="vip in props.config" :key="vip.key">
				<el-card :body-style="cardStyle" shadow="hover">
          <view class="vip-item-main" hover-class="none" hover-stop-propagation="false">
            <view class="vip-item-price">
              <text style="font-size: 66rpx;">￥</text>
              <text>{{ vip.price/100 }}</text>
            </view>
            <view class="vip-item-desc">
              /{{ vip.desc }}
            </view>
          </view>

          <view class="vip-item-origin-price">
            原价￥{{ vk.pubfn.priceFilter(vip.originPrice) }}
          </view>
          <el-button @click="toPay(vip.key)" size="default" class="pay-btn" round style="background:linear-gradient(to right, #ffd6a2, #ffb158)">立即购买</el-button>
				</el-card>
			</view>
		</view>
  </el-dialog>
	<uni-pay ref="pay" @success="paySuccess" @cancel="cancel" @fail="fail" :toSuccessPage="false" :debug="true"></uni-pay>
</template>
<script lang="ts" setup>
import { ref, defineProps } from 'vue';

const vk = uni.vk;

const cardStyle = `
  border: none;
  background: #fff7ec;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`

const createOrder = async (priceKey: string) => {
	let res;
	try {
		res = await vk.callFunction({
			url: 'client/order/kh/add',
			title: '请求中...',
			data: {
				orderType: 'tool',
				notityType: 'tool',
				extendData: {
					tool_id: props.toolId,
					priceKey,
				}
			}
		});
	} catch(err){
		return Promise.reject('订单创建失败')
	}
	if (!res) return Promise.reject('订单创建失败');

	return res;
}

let pay = ref(null);
const toPay = async (priceKey: string) => {
	let orderResult: { code: number; data: any; };
	try {
		orderResult = await createOrder(priceKey);
	} catch(err){
		console.log(err);
		vk.toast('订单创建失败');
	}
	const data = vk.pubfn.string2Number(orderResult.data)

	if (orderResult && orderResult.code === 0) {
		pay.value.open(data);
		close();
	} else {
		throw new Error('支付失败！')
	}
}
const emit = defineEmits(["update:modelValue", "paysuccess"]);
const paySuccess = () => {
	console.log('paysuccess');
  emit('paysuccess')
}
const cancel = () => {
	vk.toast('取消支付');
}
const fail = () => {
	vk.toast('支付失败');
}

const props = defineProps({
  modelValue: {
    type: String,
    default: ref(false)
  },
  goodsInfo: {
    type: Object,
    default: () => []
  }
})

const close = () => {
  emit('update:modelValue', false);
}

</script>
<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}
.vip-header {
  margin-top: 40rpx;
  color: #834f1d;
  .title {
    font-size: 54rpx;
    font-weight: bold;
  }

  .desc {
    font-size: 24rpx;
  }
}
.vip-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 18px;
  margin-bottom: 40rpx;
}
.vip-item {
  margin: 10rpx 5px;
  min-width: 500rpx;

  &-main {
    display: flex;
    align-items: flex-end;
  }

  &-desc {
    font-size: 34rpx;
    line-height: 34rpx;
    color: #6d6257;
    letter-spacing: 2px;
  }

  &-price {
    font-size: 110rpx;
    line-height: 60rpx;
    color: #f94532;
  }

  &-origin-price {
    font-size: 34rpx;
    line-height: 34rpx;
    color: #98928c;
    text-decoration: line-through;
    margin: 20rpx 0;
  }
}

.pay-btn {
  width: 300rpx;
  color: #804a19;
}
</style>
